<template>
  <view class="cart-container">
    <!-- 购物车商品列表 -->
    <scroll-view scroll-y class="cart-list" v-if="cartList.length > 0">
      <view class="cart-item" v-for="(item, index) in cartList" :key="item.id">
        <image class="item-image" :src="item.thumb" mode="aspectFill"></image>
        
        
        <view class="item-info">
          <view class="item-title">{{item.name}}</view>
          <!-- <view class="item-spec">库存量:{{item.count}}/{{item.jian}}{{item.type==1?'件':'桶'}}</view> -->
		  <view class="item-spec">
		  	{{item.address}}
		  </view>
         <!-- <view class="item-price-row">
            <text class="item-price">¥{{item.price}}</text>
            <view class="item-count">
              <text class="count-btn" @click="changeCount(index, -1)">-</text>
              <text class="count-num">{{item.count}}</text>
              <text class="count-btn" @click="changeCount(index, 1)">+</text>
            </view>
          </view> -->
        </view>
      </view>
    </scroll-view>
    <!-- 空购物车提示 -->
    <view class="empty-cart" v-else>
      <image src="/static/images/empty-cart.png" mode="widthFix"></image>
      <view class="empty-text">仓库空空如也~</view>
    </view>
  
  </view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
export default {
  data() {
    return {
      cartList: [
        {
          id: 1,
          name: '冰火泉380ml',
          spec: '规格: 默认',
          price: 99.00,
          image: '/static/images/shop2.jpg',
          count: 1,
		  jian:12,
		  type:1,
          selected: false,
		  num:1,
        },
        {
          id: 2,
          name: '天然水1L',
          spec: '规格: 红色 XL',
          price: 129.00,
           image: '/static/images/shop1.jpg',
          count: 2,
		  jian:2,
		  type:2,
          selected: false,
		  num:1,
        }
      ]
    }
  },
  computed: {
    
  },
  onLoad(){
	  this.getList()
  },
  methods: {
	  getList(){
		  request({
		  	url: 'index/godown-list',
		  	method: 'get',
		  	// data: { username:this.username,password:this.password,openid:uni.getStorageSync("openid")}
		  }).then(res => {
		  	if (res.status == 200) {
		  		console.log(res.data)
		  		this.cartList = res.data.list
		  	} else {
		  		uni.showToast({
		  			title: res.message,
		  			icon: 'none',
		  			duration: 2000
		  		});
		  	}
		  }).catch((err) => {
		  	uni.showToast({
		  		title: err.message,
		  		icon: 'none',
		  		duration: 2000
		  	});
		  })
	  },
    // 去首页
    goToIndex() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>
<style lang="scss">
	.cart-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f7f7f7;
	}

	.cart-list {
		flex: 1;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.cart-item {
		display: flex;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
	}

	.item-select {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
	}

	.item-select image {
		width: 36rpx;
		height: 36rpx;
	}

	.item-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
	}

	.item-info {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.item-title {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.item-spec {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
		span{
			color: #e74c3c;
		}
	}

	.item-price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.item-price {
		font-size: 32rpx;
		color: #e74c3c;
		font-weight: bold;
	}

	.item-count {
		display: flex;
		align-items: center;
	}

	.count-btn {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1rpx solid #ddd;
		font-size: 32rpx;
	}

	.count-num {
		width: 70rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.empty-cart {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 100rpx;
	}

	.empty-cart image {
		width: 300rpx;
		margin-bottom: 40rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 40rpx;
	}

	.go-shopping {
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #e74c3c;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.cart-footer {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		padding: 0 20rpx;
		.r{
			display: flex;
			
		}
	}

	.footer-select {
		display: flex;
		align-items: center;
		width: 140rpx;
	}

	.footer-select image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.footer-total {
		flex: 1;
		text-align: right;
		padding-right: 20rpx;
	}

	.total-price {
		color: #e74c3c;
		font-weight: bold;
		font-size: 32rpx;
	}

	.footer-btn {
		min-width: 150rpx;
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #e74c3c;
		color: #fff;
		border-radius: 40rpx;
		margin-left: 20rpx;
	}
</style>